<template>
	<view class="content-box">
		<view class="search-box" @click="clickSearchInput">
			<uni-search-bar placeholder="请输入要搜索的音乐" cancelButton="none"></uni-search-bar>
		</view>
		<!-- 广场内容 -->
		<view class="square-items" v-for="(squareItem,index) in squareInfo" @click.stop="skipToDynamic(squareItem)">
			<view class="title-area" >
				<view class="avatar" @click.stop="skipToDetail">
					<u-avatar :src="squareItem.user_avatar"></u-avatar>
				</view>
				<text @click.stop="skipToDetail">{{squareItem.user_name}}</text>
			</view>
			<view class="content-area">
				<view class="word">{{squareItem.square_content}}</view>
				<view class="imgs">
					<image class="img" :src="picItem.pic_url" v-for="(picItem,index2) in squareItem.pic_list"
						@click.stop="previewImg(picItem.pic_url,squareItem.pic_list)"></image>
				</view>
			</view>
			<view class="comment-area" v-show="squareItem.comment_name||squareItem.comment_content">
				<text>{{squareItem.comment_name}}：</text>
				<text>{{squareItem.comment_content}}</text>
			</view>
			<view class="other-area">
				<view class="share-comment-praise">
					<view class="share" @click.stop="share">
						<image src="../../static/images/squareImg/share.png"></image>
						<text>分享</text>
					</view>
					<view class="comment">
						<image src="../../static/images/squareImg/comment.png"></image>
						<text>评论{{squareItem.commentTotal}}</text>
					</view>
					<view class="praise" @click.stop="praise">
						<image src="../../static/images/squareImg/none_praise.png"></image>
						<text>点赞{{squareItem.praiseTotal}}</text>
					</view>
				</view>
				<view class="more" @click.stop="more">
					<image src="../../static/images/squareImg/more.png"></image>
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg',
				squareInfo: [],
			};
		},
		onLoad() {
			
			this.getSquareInfo()
		},
		methods: {
			// 获取广场信息
			getSquareInfo() {
				uni.request({
					url: 'http://1.116.242.41:4000/square',
					success: (res) => {
						this.squareInfo = res.data.data
					},
					fail: (err) => {
						console.log('获取广场内容失败')
					}
				})
			},
			// 预览图片
			previewImg(img, imgs) {
				let picUrls = imgs.map((item) => {
					return item.pic_url
				})
				
				uni.previewImage({
					current: img,
					urls: picUrls,
					loop:true,
					indicator:true
				})
			},
			// 跳转到动态页面
			skipToDynamic(item){
				uni.navigateTo({
					url:'../dynamic/dynamic?id='+item.square_id
				})
			},
			// 跳转到个人详情页
			skipToDetail(){
				
			},
			// 点击分享
			share(){
				
			},
			// 点击点赞
			praise(){
				
			},
			// 点击更多
			more(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		width: 750rpx;
		min-height: 1100rpx;
		background-color: #ECEBF0;

		.search-box {

			width: 100%;
			height: 120rpx;
		}

		.square-items {
			width: 750rpx;
			margin: 0 auto 20rpx auto;
			padding: 20rpx 20rpx;
			background-color: white;

			.title-area {
				display: flex;
				align-items: center;

				.avatar {
					margin-right: 20rpx;
				}
			}

			.content-area {
				margin: 10rpx 0;

				.word {
					margin-bottom: 20rpx;
				}

				.imgs {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.img {
						width: 233rpx;
						height: 233rpx;
						border-radius: 10rpx;
						margin-bottom: 10rpx;
					}
				}

			}

			.comment-area {
				margin-bottom: 10rpx;

				text:nth-child(1) {
					font-weight: bold;
				}

				text:nth-child(2) {
					color: gray;
				}
			}

			.other-area {
				display: flex;
				justify-content: space-between;

				.share-comment-praise {
					width: 50%;
					display: flex;
					justify-content: space-between;

					.share {
						display: flex;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}

					.comment {
						display: flex;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}

					.praise {
						display: flex;
						
						image {
							width: 52rpx;
							height: 52rpx;
							margin-top: -8rpx;
						}
					}
				}

				.more {

					image {
						width: 38rpx;
						height: 38rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
